<template>
	<view class="market">
		<view class="header">
			<view class="tabs">
				<button :class="{active: midIndex == 0}" @click="bindPickerChange(0)">我的藏品</button>
				<!-- <button :class="{active: midIndex == 1}" @click="bindPickerChange(1)">我的订单</button> -->
			</view>

			<!-- <image class="search-icon" src="/static/image/icon-001.png" mode=""></image> -->
		</view>
		<view class="sort-box">
			<u-search placeholder="藏品关键词" v-model="keyword" @search='searchVal' @custom='searchVal'></u-search>
			<view style="margin-top: 24rpx;">
				<u-tabs :list="listTab" :current="current1" bar-width="0" bar-height="6" @change="changeIndex"
					bg-color='#191b28' inactive-color='#fff' active-color='#545454'></u-tabs>
			</view>
			<!-- <view class="sort" @click="initNoSort">
				<text :class="{active: (query.time_order === '' && query.price_order === '')}">全部</text>
			</view>
			<view class="sort" @click="initTime">
				<text>时间</text>
				<image src="/static/image/sort.png" v-if="query.time_order === ''" />
				<image src="/static/image/sort-asc.png" v-if="query.time_order === 1" />
				<image src="/static/image/sort-desc.png" v-if="query.time_order === 2" />
			</view>
			<view class="sort" @click="initPrice">
				<text>价格</text>
				<image src="/static/image/sort.png" v-if="query.price_order === ''" />
				<image src="/static/image/sort-asc.png" v-if="query.price_order === 1" />
				<image src="/static/image/sort-desc.png" v-if="query.price_order === 2" />
			</view> -->
		</view>
		<!-- 藏品列表 -->
		<empty v-if="list.length == 0"></empty>
		<view class="list-content">
			<view class="list-item" v-for="(item, index) in list" :key="index" @click="goDetails(item)">
				<view class="item-image-box">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="flex-between">
					<view class="item-name">{{ item.name }}</view>
					<view class="item-name">{{ item.goods_count_num }}份</view>
				</view>
			</view>
		</view>
		<tabbar ref="tabbar"></tabbar>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import tabbar from '@/components/tabbar.vue'
	export default {
		components: {
			empty,
			tabbar,
		},
		data() {
			return {
				current1: 0,
				// 1=持有中,2=挂售中,3=交易中,4=已出售,5=已转赠6=锻销毁
				listTab: [{
						name: '持有中'
					}, {
						name: '挂售中'
					}, {
						name: '交易中',
					}, {
						name: '已出售',
					}, {
						name: '已转赠',
					}
					// , {
					// 	name: '锻造销毁',
					// },
				],
				current: 0,
				flag: false, //上拉加载
				midIndex: 0,
				keyword: '',
				query: {
					page: 1,
					pagesize: 10,
					search: '',
					time_order: '',
					price_order: '',
				},
				status: 'more',
				list: [],
				array: ['藏品', '盲盒']
			}
		},
		onShow() {
			this.init()
		},
		onHide() {
			this.midIndex = 0
			this.flag = false
			this.status = 'more'
			this.list = []
			this.query = {
				page: 1,
				pagesize: 10,
				search: '',
				// 1=正序 2=倒叙
				time_order: '',
				// 1=正序 2=倒叙
				price_order: '',
			}
		},
		onReachBottom() {
			if (!this.flag) {
				this.status = 'loading'
				this.query.page++
				this.init()
			}
		},
		onPullDownRefresh() {
			this.flag = false
			this.query.page = 1
			this.list = []
			this.init()
		},
		methods: {
			changeIndex(index) {
				this.current1 = index
				this.query.page = 1
				this.list = []
				this.init()
			},
			searchVal() {
				this.query.page = 1
				this.list = []
				this.init()
			},
			bindPickerChange(midIndex) {
				this.midIndex = midIndex
				this.list = []
				this.query = {
					page: 1,
					pagesize: 10,
					search: '',
					time_order: '',
					price_order: '',
				}
				this.init()
			},
			initCut() {

			},
			// 选择是版权品还是盲盒
			changeMid(index) {
				this.midIndex = index
				this.list = []
				this.query = {
					page: 1,
					pagesize: 10,
					search: '',
					time_order: '',
					price_order: '',
				}
				this.init()
			},
			// 取消排序
			initNoSort() {
				this.query.time_order = ''
				this.query.price_order = ''
				this.list = []
				this.query.page = 1
				this.init()
			},
			// 时间排序
			initTime() {
				if (this.query.time_order === '') {
					this.query.time_order = 1
				} else if (this.query.time_order === 1) {
					this.query.time_order = 2
				} else if (this.query.time_order === 2) {
					this.query.time_order = 1
				}
				this.query.price_order = ''
				this.list = []
				this.query.page = 1
				this.init()
			},
			// 价格排序
			initPrice() {
				if (this.query.price_order === '') {
					this.query.price_order = 1
				} else if (this.query.price_order === 1) {
					this.query.price_order = 2
				} else if (this.query.price_order === 2) {
					this.query.price_order = 1
				}
				this.query.time_order = ''
				this.list = []
				this.query.page = 1
				this.init()
			},
			init() {
				if (this.midIndex == 0) {
					this.$http('api/orders/usersGoodsList', {
						status: this.current1 + 1,
						keyword: this.keyword
					}).then(res => {
						uni.stopPullDownRefresh()
						let data = res
						this.list = res
						this.flag = true
						this.status = 'noMore'
					})
				} else {
					this.$http('api/orders/goodsOrderList', this.query).then(res => {
						uni.stopPullDownRefresh()
						let data = res.data
						if (data.length == 0) {
							this.flag = true
							this.status = 'noMore'
						} else {
							this.list = this.list.concat(data)
							if (data.length < 10) {
								this.flag = true
								this.status = 'noMore'
							}
						}
					})
				}
			},
			toSearch() {
				this.query.page = 1
				this.list = []
				this.init()
			},
			toUsersGoodsListPage(item) {
				uni.navigateTo({
					url: `/pages/my/usersGoodsList?current=${this.current}&goodsId=${item.goods_id}&goodsName=${item.name}`,
				});
			},
			toUsersBoxListPage(item) {
				uni.navigateTo({
					url: `/pages/my/usersBoxList?current=${this.current}&boxId=${item.box_id}&boxName=${item.name}`,
				});
			},
			goDetails(item) {
				if (this.midIndex == 0) {
					this.toUsersGoodsListPage(item);
					// uni.navigateTo({
					// 	url: `./marketCollect?goodsId=${item.id}`,
					// })
				} else {
					uni.navigateTo({
						// url: `/pages/pay/collectPay?id=${item.id}`
						url: `/pages/home/marketBox?order_id=${item.id}`,
					})
				}
			},
		},
	}
</script>
<style lang="scss" scoped>
	/deep/ .u-tabs .u-tab-item {
		color: #fff;
		background-color: #FDD4A0;
		margin-right: 32rpx;
		height: 30px !important;
		line-height: 30px !important;
		padding: 0 20px;
		border-radius: 15px;
		width: max-content !important;
		flex: unset !important;
	}

	/deep/.u-tab-item-1 {
		border-radius: 30rpx !important;
	}

	/deep/.u-tab-item {
		height: 60rpx !important;
		line-height: 60rpx !important;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.market {
		width: 100%;
		min-height: 100vh;
		background: rgba(25, 27, 40, 1);
		overflow: hidden;
	}

	.header {
		background: RGBA(21, 21, 31, 1);
		position: relative;
		overflow: hidden;

		.search-icon {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 31rpx;
			right: 30rpx;
		}
	}

	.tabs {
		width: max-content;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(34, 36, 51, 1);
		border-radius: 8rpx;
		margin: 25rpx auto;

		button {
			width: 160rpx;
			height: 52rpx;
			line-height: 52rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			background: none;

			&.active {
				color: #15151F;
				background: #FDD4A0;
			}
		}
	}

	.sort-box {
		// display: flex;
		padding: 20rpx 30rpx 30rpx;

		.sort {
			display: flex;
			align-items: center;

			text {
				font-size: 22rpx;
				color: #A9A8B6;
				position: relative;
			}

			text.active {
				color: rgba(253, 212, 160, 1);
			}

			text.active::after {
				content: '';
				position: absolute;
				bottom: -15rpx;
				left: calc(50% - 20rpx);
				width: 40rpx;
				height: 4rpx;
				background: #FDD4A0;
				border-radius: 1px;
			}

			image {
				width: 10rpx;
				height: 19rpx;
			}
		}
	}

	.list-content {
		padding: 0 30rpx;
		display: flex;
		flex-wrap: wrap;

		.list-item {
			width: 334rpx;
			height: 405rpx;
			background: #222433;
			border-radius: 16rpx;
			overflow: hidden;
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.item-image-box {
				width: 100%;
				height: 334rpx;
				position: relative;
				border-radius: 16rpx;
				overflow: hidden;

				&>image {
					width: 334rpx;
					height: 334rpx;
				}

				.item-num {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 50rpx;
					background: rgba(0, 0, 0, .6);
					display: flex;
					align-items: center;
					padding: 0 20rpx;

					&>image {
						width: 18rpx;
						height: 18rpx;
						margin-right: 3rpx;
					}

					text {
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
			}

			.item-name {
				margin-top: 25rpx;
				line-height: 24rpx;
				font-size: 24rpx;
				color: #A9A8B6;
				padding: 0 14rpx;
				overflow: hidden; //超出的文本隐藏
				display: -webkit-box;
				-webkit-line-clamp: 1; // 超出多少行
				-webkit-box-orient: vertical;
			}

			.item-price {
				margin-top: 20rpx;
				margin-bottom: 28rpx;
				line-height: 24rpx;
				font-size: 24rpx;
				font-weight: normal;
				color: #FFFFFF;
				padding: 0 14rpx;
			}
		}
	}

	.homeIcon {
		width: 40rpx;
		height: 40rpx;
	}

	.tipsRight {
		background: rgba(255, 255, 255, 0.2);
	}

	.userImg {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
	}

	/deep/ .u-action-active {
		color: #fff;
	}

	.midItem {
		width: 335rpx;
		height: 68rpx;
		// color: #999;
		font-size: 26rpx;
		text-align: center;
	}

	.midActive {
		background: #efe0c0;
		color: #1a1a1a;
	}

	.title {
		font-weight: 600;
	}

	.sort {
		display: flex;
		align-items: center;
		margin-left: 10rpx;

		image {
			width: 16rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}

		&+.sort {
			margin-left: 40rpx;
		}
	}

	.search-box {
		width: 100%;
		height: 40px;
		background: #FFFFFF;
		border-radius: 20px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 10px;

		image:first-child {
			width: 20px;
			height: 20px;
			margin-right: 10px;
		}

		input {
			flex: 1;
			font-size: 14px;
			color: #333333;

			&::placeholder {
				color: #A1A1A1;
			}
		}

		image:last-child {
			width: 15px;
			height: 15px;
		}
	}
</style>
